<!DOCTYPE html>
<!-- searching site -->

<html>
<head>
    <meta charset="UTF-8">
    <title>wordcloud of icourse.club</title>

    <style>
						
        @font-face {
            font-family: 'FontAwesome';
            src: url('./fontawesome-webfont.eot');
            src: url('./fontawesome-webfont.eot') format('embedded-opentype'),
                url('./fontawesome-webfont.woff2') format('woff2'), url('.fontawesome-webfont.woff') format('woff'),
                url('./fontawesome-webfont.ttf') format('truetype'),
                url('./fontawesome-webfont.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        }
    
        .search-box {
            font-family: FontAwesome;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgb(232,232,232);
            height: 50px;
            border: 10px;
            border-radius: 60px;
            padding: 10px;
            opacity: 0;
            transition-delay: 99999999s;
            transition-duration: 1s;
        }
    
        .search-box:hover>.search-txt {
            width: 240px;
            padding: 0 6px;
        }
    
        .search-box:hover>.search-btn {
            color: white;
            background: black;
        }
    
        .search-btn {
            transition: 0.5s;
            font-family: FontAwesome;
            font-size: 25px;
            color: black;
            float: right;
            width: 50px;
            height: 50px;	
            border: 10px;
            border-radius: 50%;
            background: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
        }
    
        .search-txt {
            border: none;
            background: none;
            outline: none;
            float: left;
            padding: 0;
            color: rgb(0, 97, 211);
            font-size: 16px;
            transition: 0.6s;
            line-height: 50px;
            width: 0px;
        }
       
        @keyframes flash {
            50% {
                transform: scale(1.5);
            }
    
            80% {
                transform: rotate(-60deg);
            }
    
            100% {
                transform: rotate(30deg);
            }
            
            
        }
        html:hover .search-box {
            opacity: 1;
            transition-delay: 0s;
            transition-duration: 0s;
        }
        
    </style>

</head>

<body>
		
    <center>
        <div class="search-box", method="post">
            <input class="search-txt" type='text' name='course_name' id='inp' placeholder="What course are you looking for?"/>
            <input class="search-btn" type='button' id='btn' value='&#xf002' />
        </div>

    </center>
    
    
</body>

<!-- import ajax -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<!-- searching box -->
<script>
    var oInp = document.getElementById('inp');
    var oBtn = document.getElementById('btn');
    
    oBtn.onclick = function () {
        Search();
    }

    document.onkeydown = function () {
        if (event.keyCode == 13) {
            Search();
        }
    }

    function Search() {
        /* get the searching result page, which is the center value of the following process, like text analysis, word extraction and wordcloud generation */

        url = 'https://icourse.club/search/?q=' + oInp.value;

        /* return url to flask */
        $.ajax({
			type: 'GET',
			url: '/wordcloud',
			dataType: 'json',
			data: {'name':oInp.value},
			success: function(res){
				console.log(res)
			},
			error: function(){
				console.log('error')
			}
		})	
        window.open(url);
        /* show the wordcloud page */
        window.open('/wordcloud');
    }
</script>




<!-- background -->
<script>(() => {
    document.querySelectorAll('#article-container span.katex-display').forEach(item => {
      btf.wrap(item, 'div', { class: 'katex-wrap'})
    })
  })()</script></div><script defer="defer" id="fluttering_ribbon" mobile="true" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-fluttering-ribbon.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"]
  
  var pjax = new Pjax({
    elements: 'a:not([target="_blank"])',
    selectors: pjaxSelectors,
    cacheBust: false,
    analytics: false,
    scrollRestoration: false
  })
  
  document.addEventListener('pjax:send', function () {
  
    // removeEventListener scroll 
    window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
    window.scrollCollect && window.removeEventListener('scroll', scrollCollect)
  
    typeof preloader === 'object' && preloader.initLoading()
    document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
    
    if (window.aplayers) {
      for (let i = 0; i < window.aplayers.length; i++) {
        if (!window.aplayers[i].options.fixed) {
          window.aplayers[i].destroy()
        }
      }
    }
  
    typeof typed === 'object' && typed.destroy()
  
    //reset readmode
    const $bodyClassList = document.body.classList
    $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')
  
    typeof disqusjs === 'object' && disqusjs.destroy()
  })
  
  document.addEventListener('pjax:complete', function () {
    window.refreshFn()
  
    document.querySelectorAll('script[data-pjax]').forEach(item => {
      const newScript = document.createElement('script')
      const content = item.text || item.textContent || item.innerHTML || ""
      Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
      newScript.appendChild(document.createTextNode(content))
      item.parentNode.replaceChild(newScript, item)
    })
  
    GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()
  
    typeof chatBtnFn === 'function' && chatBtnFn()
    typeof panguInit === 'function' && panguInit()
  
    // google analytics
    typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});
  
    // baidu analytics
    typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);
  
    typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
  
    // prismjs
    typeof Prism === 'object' && Prism.highlightAll()
  
    typeof preloader === 'object' && preloader.endLoading()
  })
  
  document.addEventListener('pjax:error', (e) => {
    if (e.request.status === 404) {
      pjax.loadUrl('/404.html')
    }
  })
</script>

<script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>




</html>


    